<!DOCTYPE html>
<html>
    <head>  
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="js/phonegap-1.2.0.js"></script>
    <Script type="text/javascript" src="js/demoplugin.js"></script>

  <script type="text/javascript">             
        function onDeviceReady () {
        	PhoneGap.addConstructor(function() {
                PhoneGap.addPlugin("demo", new DemoPlugin());
            });    
        	
        	$('#send').bind('click', function () {        
                //var plugin = new DemoPlugin();
                window.plugins.demo.sendSMS(function () { 
                   alert('Message sent successfully'); 
                },
                function (e) {
                    alert('Message Failed:' + e);
                },
                $('#phone').val(), 
                $('#message').val());
            });     
        }
        document.addEventListener("deviceready", onDeviceReady, false);
        </script>       
        <link rel="stylesheet" type="text/css" href= "jquery.mobile-1.0b3.min.css">
        <meta name="viewport" content= "width=device-width; height=device-height; user-scalable=no">             
 </head>
 <body>
  <div id="startPage" data-role="page" data-theme="a">
   <div data-role="header">
    <h1>SMS Demo</h1>
   </div>
   <div data-role="content">
    <label for="phone">Recipient Number:</label>
    <input type="tel" id="phone" name="phone" placeholder="SMS Number"/>
    <label for="message">Message:</label>
    <textarea id="message" name="message">
    </textarea>  
    <a href="#" id="send" data-role="button">Send</a>  
   </div>
  </div>
 </body>
</html>
